﻿@model EmailMaker.Controllers.ViewModels.EmailEditVariablesModel
@using EmailMaker.Controllers;
@using EmailMaker.Dtos
@using EmailMaker.Website.Extensions

@{
    ViewBag.Title = "EditVariables";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
    var editVariablesModel;

    $(document).ready(function () {
        editVariablesModel = {
            Email: ko.observable(@Html.Raw(Html.ToJson(Model.Email))),
            updateVariables: function() {
                $.postJson("@(Html.BuildUrlFromExpressionWithoutParameters<EmailController>(c => c.UpdateVariables(null)))", {
                    Email: editVariablesModel.Email()
                }, function() {
                    window.location.href = "@(Html.BuildUrlFromExpression<EmailController>(c => c.EditRecipients(Model.Email.EmailId)))";
                    //reloadIframe("emailHtml");
                });
            }
        };
        ko.applyBindings(editVariablesModel, document.getElementById("editVariables"));
    });
</script>

<h2>Edit variables</h2>

<div id="editVariables">
    <table data-bind="template: { name: 'EmailKoTemplate', foreach: Email().Parts }">
    </table>
    <button data-bind="click: updateVariables">Next</button>
</div>
<iframe id="emailHtml" src="@(Html.BuildUrlFromExpressionWithoutParameters<EmailController>(c => c.GetHtml(default(int))))/@(Model.Email.EmailId)" width="900" height="800">
</iframe>

<script id="EmailKoTemplate" type="text/html">
    {{if PartType == @((int)PartType.Variable)}} 
        <tr>
            <td>Value</td>
            <td><input type="text" data-bind="value: VariableValue" /></td>
        </tr>
    {{/if}}
</script>


